<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="shortcut icon" href="images/logo W.jpg" />
        <title>Work to Worker</title>
        <style>
            a:link {text-decoration:none;}
            #menudiv2:hover{background-color: #FF6600;color: #1A3665}
        </style>  
        <style type="text/css">
            @font-face {
                font-family: "jokerman";
                src: url('font/VIVALDII.TTF') format("truetype");
            } 
            @media screen and (-webkit-min-device-pixel-ratio:0)
            {
                #fix1 { margin-top: -30px }
            }
            @-moz-document url-prefix()
            {
                #fix1 { margin-top: -60px }            
            }
        </style>
    </h:head>
    <h:body style="background-color:  #1A3665">
        <f:view locale="#{languageBean.locale}">

            <div style="width: 1000px;margin: auto;margin-top: 20px;background-color: white;border-radius: 10px;-moz-border-radius: 10px">
                <ui:include src="headertemplate.xhtml"/>
                <h:form>      
                    <div style="margin-top: 30px">
                        <ul>
                            <li style="display: inline-block;width: 650px;vertical-align: top;margin-left: 20px;border: 1px;border-style: double dashed;border-top-right-radius: 10px;-moz-border-top-left-radius: 10px;-moz-border-top-right-radius: 10px;border-top-left-radius: 10px">
                                <ul style="width: 550px;border-bottom-style: solid;border-bottom-width: 1px;margin-left: 30px;border-bottom-color: #cccccc">
                                    <li style="list-style: none;font-size: 22px;color: #FF6600;font-weight: bold;padding:20px 0px 10px 0px;margin-left: -20px"><h:outputText value="#{loadJobById.jobdetail.titleJob}" /></li>
                                </ul>  
                                <ul style="margin-top: 20px">
                                    <li style="display: inline-block;vertical-align: top">

                                        <h:graphicImage value="../images/Logo/#{loadJobById.jobdetail.logo}" width="80px" height="80px" style="max-width: 80px;max-height: 80px" alt="Logo"/>

                                    </li>
                                    <li style="display: inline-block;vertical-align: top;margin-left: -10px;">
                                        <ul>
                                            <li style="list-style: none;font-weight: bold;font-size: 18px;color: blue"><h:outputText value="#{loadJobById.jobdetail.nameCus}" /></li>
                                            <li style="list-style: none;margin-top: 5px;width: 450px"><h:outputText value="#{loadJobById.jobdetail.address}" /> </li>
                                            <li style="list-style: none;margin-top: 5px;font-weight: bold">Hotline : <h:outputText value="#{loadJobById.jobdetail.phone}" /></li>
                                        </ul>
                                    </li>                            
                                </ul>
                                <ul style="margin-top: 20px;width: 550px;text-align: justify">
                                    <li style="list-style: none">
                                        <h:outputText value="#{loadJobById.jobdetail.cusDescription}" escape="false"/>
                                    </li>
                                    <li style="list-style: none;margin-top: 15px">
                                        <font style="font-weight: bold">Contact Person : </font> <h:outputText value="#{loadJobById.jobdetail.contactPerson}" style="margin-left: 10px"/>
                                    </li>
                                    <li style="list-style: none;margin-top: 15px">
                                        <font style="font-weight: bold">Email : </font> <h:outputText value="#{loadJobById.jobdetail.email}" style="margin-left: 10px"/>
                                    </li>
                                    <li style="list-style: none;margin-top: 15px">
                                        <font style="font-weight: bold">Expired Date : </font><h:outputText value="#{loadJobById.jobdetail.experiedDate}" style="margin-left: 10px"/>
                                    </li>
                                </ul>
                                <ul style="margin-top: 20px;width: 550px;border-top-style: solid;border-top-width: 1px;margin-left: 30px;border-top-color: #cccccc;">
                                    <li style="list-style: none;font-size: 22px;color: #FF6600;font-weight: bold;margin-top: 20px">
                                        Job Description
                                    </li>
                                    <li style="list-style: none;margin-top: 20px;margin-left: -30px">
                                        <font style="font-weight: bold">Job Category :</font>
                                        <ui:repeat value="#{loadJobById.jobdetail.listCateOfJob}" var="listcatejob">
                                            <li style="line-height: normal"><h:outputText value="#{listcatejob.namecate}"/> </li>                                   
                                        </ui:repeat>

                                    </li>
                                    <li style="list-style: none;margin-top: 15px;margin-left: -30px">
                                        <font style="font-weight: bold">Work Location :  </font>
                                        <ui:repeat value="#{loadJobById.jobdetail.listLocaleOfJob}" var="listlocaljob">
                                            <li style="line-height: normal"><h:outputText value="#{listlocaljob.namelocation}"/> </li>
                                        </ui:repeat>

                                    </li>
                                    <li style="list-style: none;margin-top: 15px;margin-left: -30px">
                                        <font style="font-weight: bold">Job Level : </font> <h:outputText value="#{loadJobById.jobdetail.jobLevel}" style="margin-left: 10px"/>
                                    </li>
                                    <li style="list-style: none;margin-top: 15px;margin-left: -30px">
                                        <font style="font-weight: bold">Type of Job : </font><h:outputText value="#{loadJobById.jobdetail.typeOfJob}" style="margin-left: 10px"/>
                                    </li>
                                    <li style="list-style: none;margin-top: 15px;margin-left: -30px">
                                        <font style="font-weight: bold">Number : </font> <h:outputText value="#{loadJobById.jobdetail.number}" style="margin-left: 10px"/>
                                    </li>
                                    <li style="list-style: none;margin-top: 15px;margin-left: -30px;font-weight: bold;color: #FF6600">
                                        Job Description :
                                    </li>
                                    <li style="list-style: none;margin-top: 10px;text-align: justify;width: 530px">
                                        <h:outputText value="#{loadJobById.jobdetail.jobDescription}" escape="false"/>
                                    </li>
                                    <li style="list-style: none;margin-top: 15px;margin-left: -30px;font-weight: bold;color: #FF6600">
                                        Job Requirement :
                                    </li>
                                    <li style="list-style: none;margin-top: 10px;text-align: justify;width: 530px">
                                        <h:outputText value="#{loadJobById.jobdetail.requirement}" escape="false"/>
                                    </li>
                                    <li style="list-style: none;margin-top: 15px;margin-left: -30px;font-weight: bold;color: #FF6600">
                                        Benefits :
                                    </li>
                                    <li style="list-style: none;margin-top: 10px;text-align: justify;width: 530px">
                                        <h:outputText value="#{loadJobById.jobdetail.benefit}" escape="false"/>
                                    </li>  
                                    <li style="list-style: none;margin-top: 5px;margin-left: -30px;margin-top: 30px">

                                        <h:commandButton action="#" actionListener="#{applyCVBean.applyListener()}" value="Save to my jobs" title="Save to my jobs" image="../images/apply-button2.jpg" style="width: 145px; height: 40px;">
                                            <f:param value="#{loadJobById.id}" name="idJob"/>
                                        </h:commandButton>
                                        <div style="border-radius: 5px 5px 5px 5px;float: right; margin-right: 30px;  width: 350px; background: none repeat scroll 0 0 #E7F8FF; border: 1px solid #B4DAEB; padding: 10px 15px;font-family: inherit;position: relative">
                                            <span style="background: url('../images/arrow.png') no-repeat; display: block;height: 40px; margin-left: -34px; margin-top: -6px; position: absolute; width: 40px;"/>
                                            Click Apply button to submit your resume
                                        </div>
                                    </li>
                                </ul>
                                <br/>


                                <br/>
                            </li>
                            <li style="display: inline-block;border: 1px;border-style: solid;width: 220px;border-radius: 10px;-moz-border-radius: 10px;margin-left: 20px">
                                <ul style="margin-left: -15px">
                                    <li style="list-style: none;font-weight: bold;color: #FF6600;margin-top: 10px">Work Location</li>                             
                                    <ui:repeat value="#{loadJobById.jobdetail.listLocaleOfJob}" var="listlc">
                                        <li style="list-style: none;margin-top: 5px;margin-left: 10px">
                                            <a  href="searchJobByLocale.xhtml?idlocale=#{listlc.idlocation}" style="text-decoration: underline;"> <h:outputText value="#{listlc.namelocation}"/></a> 
                                        </li>
                                    </ui:repeat>                           
                                    <li style="list-style: none;font-weight: bold;color: #FF6600;margin-top: 10px">Job Category</li>                            
                                    <ui:repeat value="#{loadJobById.jobdetail.listCateOfJob}" var="listrc">
                                        <li style="list-style: none;margin-top: 5px;margin-left: 10px">
                                            <a  href="searchResultBycate.xhtml?idcateor=#{listrc.idcategory}" style="text-decoration: underline;"><h:outputText value="#{listrc.namecate}"/></a>
                                        </li>
                                    </ui:repeat>  
                                    <li style="list-style: none;font-weight: bold;color: #FF6600;margin-top: 10px">Job Level</li>
                                    <li style="list-style: none;margin-top: 5px;margin-left: 10px;margin-top: 10px">
                                        <a  href="searchJobByLevelJob.xhtml?nameleveljob=#{loadJobById.jobdetail.jobLevel}" style="text-decoration: underline;">
                                            <h:outputText value="#{loadJobById.jobdetail.jobLevel}" id="idsd"/>
                                        </a>
                                    </li>
                                    <li style="list-style: none; font-weight: bold;color: #FF6600;margin-bottom: 15px;margin-left: 22px; margin-top: 10px;width: 180px;">

                                        <p:growl id="growl" showDetail="true" sticky="true" />
                                        <h:commandLink  action="#{saveMyJobBean.saveJobAction()}"  style="text-decoration: underline;color: #FF6600;"  >
                                            <span style="background: url('../images/save-icon.png') no-repeat; display: block;height: 20px; margin-left: -19px; margin-top: 2px; position: absolute; width: 20px;"/>
                                            Save to my jobs
                                            <f:param name="idRecruitment" value="#{loadJobById.id}"/>                                           
                                        </h:commandLink> 
                                        <br/> 
                                    </li>
                                </ul>
                            </li>     

                        </ul>
                    </div>
                    <br/>
                    <br/>
                </h:form>
            </div>
            <div style="color: white; height: 100px;border-radius: 10px;-moz-border-radius: 10px;border: 1px;border-style: solid;border-color: white;margin-top: 20px">
                <div style="text-align: right; padding-top: 20px;padding-right: 30px">
                    Copyright © by Group 1
                    <br />
                    Project Name : Work to Worker
                    <br />
                    Member in Group : Mr Bùi Hồng Hải , Mr Nguyễn Văn Cường , Mr Nguyễn Nhất Linh , Mr Lưu Thế Thông , Mr Trần Trung Hiếu
                </div>
            </div>

        </f:view>
    </h:body>
</html>

